<template>
  <basic-dialog
    title="查看商品明细"
    :visible="visible"
    :handleClose="handleClose"
    :showFooter="false"
  >
    <SkusTable
      :tableHeight="440"
      :loading="TableInfo.loading"
      :columns="TableInfo.columns"
      :dataSource="TableInfo.list"
    />
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import SkusTable from '@/components/skusTable';
import { TableInfo } from '@/utils/getUtils';
import { TABLE_COLUMNS } from './constants';
import { getOrderDetailListService } from '@/api/commodity/developmentRequirementPlan/developRequirementPool';
export default {
  components: {
    BasicDialog,
    SkusTable
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 开发计划新增编辑查看列表标识
    reqDetailNo: {
      type: String,
      default: ''
    },
    // 查询方法
    searchMethod: {
      type: Function
    }
  },
  data () {
    return {
      TableInfo: new TableInfo({ columns: TABLE_COLUMNS })
    }
  },
  watch: {
    visible (val) {
      val && this.loadDetails()
    }
  },
  methods: {
    // 加载订货明细信息
    loadDetails () {
      this.searchMethod ? this.specialSearchData() : this.setOrderDetailList()
    },
    // 设置订货明细信息
    async setOrderDetailList () {
      const data = { reqDetailNo: this.reqDetailNo }
      const res = await getOrderDetailListService(data, this.TableInfo.setLoading)
      this.TableInfo.setList(res?.retData ?? [])
    },
    // 特殊请求数据
    async specialSearchData () {
      const res = await this.searchMethod(this.TableInfo.setLoading)
      this.TableInfo.setList(res?.retData ?? [])
    },
    // 关闭弹窗
    handleClose () {
      this.$emit('update:visible', false);
    },
  }
}
</script>
